<script setup>
import { ref } from 'vue'

const growWidth = ref(400)
const shrinkWidth = ref(400)
const basicWidth = ref(400)
const initialWidth = ref(400)
const autoWidth = ref(400)
const noneWidth = ref(400)
</script>

<template>
    <div class="wrapper">
        <hr class="hr-solid-content" data-content="flex-grow">
        <p class="description">定义在Flex容器剩余空间充足的情况下如何分配剩余空间，剩余空间是指在子项根据内容占据空间之后剩余的空间，如下红色子项flex-grow设置为2，蓝色子项设置为1，当容器宽度足够的情况下，剩余空间（灰色部分）将根据2：1的比例进行分配。</p>
        <div class="flex-container" :style="{ width: growWidth + 'px' }" style="align-items: stretch;">
            <div style="flex: 2 1 auto; border: 2px solid red; background: #ccc;"><p style="margin: 0;height: 100%;background: #fff; width: fit-content;">占位文字占位文字占位文</p></div>
            <div style="flex: 1 1 auto; border: 2px solid blue; background: #ccc;"><p style="margin: 0;height: 100%;background: #fff; width: fit-content;">占位文字</p></div>
        </div>
        <el-slider style="width: 400px;" v-model="growWidth" :min="0" :max="400" :show-tooltip="false" />

        <hr class="hr-solid-content" data-content="flex-shrink">
        <p class="description">定义在Flex容器剩余空间不足的情况下如何分配空间，当容器空间不足容纳所有子项时，不足的部分子项如何分摊。如下：红色子项设置flex-shrink:2;，蓝色子项设置flex-shrink:1;,表示不足部分按2：1的比例由子项分摊，flex-shrink:0;的绿色子项不参与分摊。该分配方式直到子项最小空间为止。</p>
        <div class="flex-container" :style="{ width: shrinkWidth + 'px' }" style="align-items: stretch;">
            <div style="flex: 1 2 auto; border: 2px solid red; background: #ccc;"><p style="margin: 0;height: 100%;background: #fff; width: fit-content;">占位文字占位文字占位文字占位文字</p></div>
            <div style="flex: 1 1 auto; border: 2px solid blue; background: #ccc;"><p style="margin: 0;height: 100%;background: #fff; width: fit-content;">占位文字占位文字</p></div>
            <div style="flex: 1 0 auto; border: 2px solid green; background: #ccc;">红色子项</div>
        </div>
        <el-slider style="width: 400px;" v-model="shrinkWidth" :min="0" :max="400" :show-tooltip="false" />

        <hr class="hr-solid-content" data-content="flex-basis">
        <p class="description">定义在Flex容器以什么基准计算剩余空间，flex-basis: 0%;表示忽略子项不参与占用空间，flex-basis: auto;表示按子项内容决定占用空间，flex-basis: 100px;表示子项占用100px空间。容器空间减去各个子项占用空间得出剩余空间。</p>
        <div class="flex-container" :style="{ width: basicWidth + 'px' }" style="align-items: stretch;">
            <div style="flex: 1 1 0%; border: 2px solid red; background: red;">表示</div>
            <div style="flex: 1 1 auto; border: 2px solid blue; background: blue;"><p style="margin: 0;height: 100%;background: #fff;width:fit-content;">占用文字</p></div>
            <div style="flex: 1 1 100px; border: 2px solid green; background: green;"><p style="margin: 0;height: 100%;background: #fff; width: 100px;">100px</p></div>
        </div>
        <el-slider style="width: 400px;" v-model="basicWidth" :min="0" :max="400" :show-tooltip="false" />

        <hr class="hr-solid-content" data-content="flex: initial;">
        <p class="description">flex: initial; 等同于 flex: 0 1 auto; 不占据容器剩余空间，空间不足会缩小适应容器，根据自身宽度占据空间。</p>
        <div class="flex-container" :style="{ width: initialWidth + 'px' }" style="align-items: stretch;background: #ccc;">
            <div style="flex: initial; background: red;">淳于琼淳于琼</div>
            <div style="flex: initial; background: blue;">关羽关羽</div>
            <div style="flex: initial; background: green;">亮亮亮</div>
        </div>
        <el-slider style="width: 400px;" v-model="initialWidth" :min="0" :max="400" :show-tooltip="false" />

        <hr class="hr-solid-content" data-content="flex: auto;">
        <p class="description">flex: auto; 等同于 flex: 1 1 auto; 增大占据容器剩余空间，空间不足缩小适应容器，根据自身宽度占据空间。</p>
        <div class="flex-container" :style="{ width: autoWidth + 'px' }" style="align-items: stretch;background: #ccc;">
            <div style="flex: auto; background: red;">淳于琼淳于琼</div>
            <div style="flex: auto; background: blue;">关羽关羽</div>
            <div style="flex: auto; background: green;">亮亮亮</div>
        </div>
        <el-slider style="width: 400px;" v-model="autoWidth" :min="0" :max="400" :show-tooltip="false" />

        <hr class="hr-solid-content" data-content="flex: none;">
        <p class="description">flex: none; 等同于 flex: 0 0 auto; 不占据容器剩余空间，不缩小适应容器，根据自身宽度占据空间。</p>
        <div class="flex-container" :style="{ width: noneWidth + 'px' }" style="align-items: stretch;background: #ccc;">
            <div style="flex: none; background: red;">淳于琼淳于琼</div>
            <div style="flex: none; background: blue;">关羽关羽</div>
            <div style="flex: none; background: green;">亮亮亮</div>
        </div>
        <el-slider style="width: 400px;" v-model="noneWidth" :min="0" :max="400" :show-tooltip="false" />
    </div>  
</template>

<style scoped>
.wrapper {
    height: 100%;
    padding: 8px;
    overflow: auto;
}

.description {
    color: #555;
}

.flex-container {
    display: flex;
    flex-wrap: nowrap;
    min-height: 100px;
}
</style>